<template>
    <div>
        <!-- 全屏 -->
        <el-tooltip
            v-if="!fullscreen"
            class="item"
            effect="dark"
            :content="$t('navBar.fullScreen')"
            placement="bottom"
        >
            <span class="icon-container">
                <i
                    class="fa fa-arrows-alt"
                    aria-hidden="true"
                    @click="triggerFullScreen"
                    @mouseover.self="changeBackground($event)"
                    @mouseout.self="reduction($event)"
                />

            </span>
        </el-tooltip>

        <!-- 退出全屏 -->
        <el-tooltip
            v-else
            class="item"
            effect="dark"
            :content="$t('navBar.exitFullScreen')"
            placement="bottom"
        >
            <span class="icon-container">
                <img
                    class="fa"
                    alt="退出全屏"
                    style="width: 23px; height: 23px"
                    src="../../assets/icon/exitFullScreen.png"
                    @click="triggerFullScreen"
                    @mouseover.self="changeBackground($event)"
                    @mouseout.self="reduction($event)"
                >
            </span>
        </el-tooltip>
    </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'
export default {
    name: "Fullscreen",
    computed: {
        ...mapState({
            fullscreen: state => state.fullscreen
        })
    },
    methods: {
        ...mapMutations({
            triggerFullScreen: 'triggerFullScreen'
        }),
        // 还原背景色
        reduction(e) {
            e.target.parentNode.style.backgroundColor = 'white';
        },
        // 改变背景色
        changeBackground(e) {
            e.target.parentNode.style.backgroundColor = 'RGB(248,248,249)';
        }
    }
}
</script>

<style scoped>
    .icon-container {
        line-height: 55px;
        display: block;
    }

    .fa {
        font-size: 23px;
        cursor: pointer;
        margin: 0 15px;
    }
</style>
